<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
        *{
            margin: 0;padding:0;
      }
      .body{
        background: gray;
        height: 3000px;     
        position: relative;
      }
      .tou{
        height: 30px;
        width: 100%;
        background: red;
       
      }
      .box{
        width: 1200px;
        margin: 0px auto;
      }
      #xuan{
        width: 90px;
        height: 400px;
        position: absolute;
        top: 300px;
        left:40px;
        font-size:20px;
        border:2px solid red;
      }
      #xuan.fixed{
        position: fixed;
        top: 0px;
        left: 40px;
      }
      #xuan>ul>li{
        height: 75px;
        list-style: none;
        text-align: center;
        line-height: 75px;
      }
      .active{
        background-color: blue;color:red;
      }
    </style>
</head>
<body>
<div class="header"> 
<div class="body">
    <div class="tou"></div>
   
   <div class="box"><img src="img/1.jpg" width="1200px" height="600px"></div>
   <div class="box"><img src="img/2.jpg" width="1200px"height="600px"></div>
   <div class="box"><img src="img/3.jpg"width="1200px"height="600px"></div>
   <div class="box"><img src="img/4.jpg"width="1200px"height="600px"></div>

</div>
</div>
  <div id="xuan">
       <ul>
           <li class="th " value="0">梅花</li>
           <li class="th " value="1">竹子</li>
           <li class="th " value="2">兰花</li>
           <li class="th " value="3">菊花</li>
           <li class="goTop">返回顶部</li>
       </ul>
   </div>
    <script>
    var td = document.querySelectorAll(".box");
    var xuan =document.getElementById("xuan");
    var t = getOffsetPosition(xuan).top;
    var th=document.querySelectorAll(".th");
    var td1Top=getOffsetPosition(td[0]).top;
    var td2Top=getOffsetPosition(td[1]).top;
    var td3Top=getOffsetPosition(td[2]).top;
    var td4Top=getOffsetPosition(td[3]).top;
    var goTop=document.querySelector("goTop");
    xuan.onclick=function(eve){
      var e = eve || window.event;
      var target = e.target || e.srcElement;
       if(target.getAttribute("value")){
        var i=target.getAttribute("value");
      var st=getOffsetPosition(td[i]).top;
          document.documentElement.scrollTop=st;
          
       }
        if(target.className=="goTop"){
          console.log(target)
           animation();
        }
      }
      function animation(){
      var st=document.documentElement.scrollTop||document.body.scrollTop;
      var timer =setInterval(function(){
      if(st<=1){
      st=document.documentElement.scrollTop=0;
      clearInterval(timer)
      }else{
      st-=st/50;
      document.documentElement.scrollTop=document.body.scrollTop=st;
           }
      },0)
      }
        function getOffsetPosition(dom){
            var left=0,t=0;
            while(dom.offsetParent){
                t += dom.offsetTop;
                left += dom.offsetLeft;
                dom = dom.offsetParent;
            }
            var o = {left:left,top:t};
            return o;
        }
        window.onscroll =function(){
         if(document.documentElement.scrollTop>=t||document.body.scrollTop>=t){
          xuan.className="fixed";
         }else{
         xuan.className="";
        }
       for(var i=0;i<th.length;i++){
          th[i].className = th[i].className.replace("active","");
        }
          if(document.documentElement.scrollTop>=td4Top){
          th[3].className+="active";
        }else if(document.documentElement.scrollTop>=td3Top){
          th[2].className+="active";
        }else if(document.documentElement.scrollTop>=td2Top){
          th[1].className+="active";
        }else if(document.documentElement.scrollTop>=td1Top){
          th[0].className+="active";
        }


      }

    </script>
</body>
</html>